<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>【JS-Corner】第一期：带你领略正则的美妙</title>
</head>
<style>
.is-youth{
    color: red;
}
</style>
<body>
    <div>
        <pre>
            &lt;%= xxx %>       直接插值        interpolate
            &lt;%- xxx %>       字符串逃逸      escape
            &lt;%  xxx %>       表达式代码语句  expression
        </pre>
    </div>

    <hr>

    <div id="container"></div>

    <script src="./template.js"></script>

    <script type="text/template" id="template">
        <ul class="list">
            <% obj.forEach(function(e){ %>
                <% if(e.age < 18){ %>
                    <li class="is-youth">
                        <%= e.name %> ---- <%= e.age %> ： ~young~
                    </li>
                <% } else { %>
                    <li>
                        <%= e.name %> ---- <%= e.age %>
                    </li>
                <% } %>
            <% }) %>
        </ul>
    </script>
    
    <script>
        // 数据
        var data = [
            {
                name: "CoderMonkey",
                age: 18
            },
            {
                name: "CoderMonkie",
                age: 9
            }
        ]

        // 自定义模板规则设置
        var settings = {
            interpolate: /<%:([\s\S]+)%>/,
            escape: /<%!([\s\S]+)%>/,
        }

        var templateString = document.getElementById('template').innerHTML

        var compiled = template(templateString)
        // 可自定义模板规则：
        // var compiled = template(templateString, settings)

        var result = compiled(data)

        document.querySelector('#container').innerHTML = result

    </script>
</body>
</html>